
class List {
    constructor() {
        // this.box1=$('.box1')[0]
        // console.log(this.box1)
        this.ul = document.querySelector('.box1>ul')
        // console.log(this.ul)
        this.box1 = document.querySelector('.box1')
        // console.log(this.box)

        // this.box1=document.querySelector('.box>.mbox')
        this.box2 = document.querySelector('.box>.abox')
        // console.log(this.box2)



        // console.log(box);
        // console.log(this.ul)


        this.request()

        this.onclickSort()
        // this.add()
        // this.count()


    }

    request() {
        $.ajax({
            url: '../data/list.json',   // 必填，请求的地址 （获取这里填获取数据的地址）
            type: 'GET',   // 选填，请求方式，默认是 GET（忽略大小写）



        }).then(res => {
            // console.log(res)
            var data = res.result.items
            var datalist = data.slice(0, 40)
            // console.log(data);
            this.render(datalist)




        })


    }
    render(datalist) {
        // console.log(datalist)
        datalist.forEach((item) => {
            this.ul.innerHTML += `
             
                <li>
                <a href="details.html?data-id=${item.id}">
                <div class="pic">
                <img src="${item.picture}">
            </div>
            <p class="name hide">${item.name}</p>
            <p class="desc hide">${item.desc}</p>
   
            <p class="price">￥${item.price}</p>
            </a>
            <button data-id=${item.id} class='btn2'>加入购物车</button>

              
               
            </li> 
                        `
        })
        this.onclickSort(datalist)

    }


    onclickSort(datalist) {
        // console.log(datalist);
      
        // console.log(arr)

        this.box2.onclick = () => {
            // console.log(this.box2)
            // console.log(111)
            // console.log(data)
            // var arr=[]
            // arr.push(this.data[6])
            // console.log(this.data[6])
            // console.log(arr)
            for (let i = 0; i < datalist.length - 1; i++) {
                // console.log(this.data)
                // 内层控制的趟数
                for (let j = 0; j < datalist.length - i - 1; j++) {

                    if (Number(datalist[j].price) > Number(datalist[j + 1].price)) {
                        //交换两个数的位置
                        var temp
                        temp = datalist[j]
                        datalist[j] = datalist[j + 1]
                        datalist[j + 1] = temp
                    }
                }

            }
            console.log(datalist)

            // this.render(this.data)
            var str='<ul>'
            datalist.forEach((item) => {
                // console.log(datalist)
                // console.log(this.ul)
                str += `
                 
                    <li>
                    <a href="details.html?data-id=${item.id}">
                    <div class="pic">
                    <img src="${item.picture}">
                </div>
                <p class="name hide">${item.name}</p>
                <p class="desc hide">${item.desc}</p>
       
                <p class="price">￥${item.price}</p>
                </a>
                <button data-id=${item.id} class='btn2'>加入购物车</button>
    
                  
                   
                </li> `
                // str+='</ul>'

            })
            str+='</ul>'
            this.box1.innerHTML=str
        }

       

    }
}
    new List()
